import React, { FC, ReactNode, useContext, useState } from 'react'
import { Affix, Switch } from 'antd';
import { BarsOutlined, AppstoreOutlined } from '@ant-design/icons';
import ListItem from './ListItem';
import { PlayerCtx } from '../context-manager/contextManager';
interface Props {
    index?: number;

}
/**
 * 选集列表
 * @param props 
 * @returns 
 */
const SelectionList: FC<Props> = (props) => {
    const [container, setContainer] = useState<HTMLDivElement | null>(null);
    const { videoIndex } = useContext(PlayerCtx);
    const [type, setType] = useState('List');
    const list = new Array(100).fill(1);
    console.log('======SelectionList=====');
    const onChange = () => {

    }
    return (
        <div>
            <div className='video-auth'>
                {/* 视频作者 */}
            </div>
            <div className='videos-container' ref={setContainer}>
                <Affix target={() => container} >
                    <div className='video-multi-page'>
                        <h3>视频选集</h3>
                        <div className='cur-page'>( {videoIndex as number + 1} / {list.length} )</div>
                        <div className='list-toggle' >
                            {
                                type === 'List' ? <BarsOutlined onClick={() => setType('Card')} /> : <AppstoreOutlined onClick={() => setType('List')} />
                            }
                        </div>
                        <div className='item-next'> <span className='txt'>自动连播</span>   <span className='switch-button'><Switch defaultChecked size="small" onChange={onChange} /></span>  </div>
                    </div>
                </Affix>
                <div className='video-list'>
                    <ListItem type={type} list={list} />
                </div>
            </div>

        </div>
    )
}

export default SelectionList
